<template>
  <!-- 这个页面的样式是使用全局css变量来控制的 -->
  <div class="container">
    <div class="login"></div>
    <div class="register"></div>
    <div class="shade" :class="{ move: isMoved }">
      <button @click="change">切换登录</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginView',
  data() {
    return {
      isMoved: false,
    }
  },
  methods: {
    change() {
      this.isMoved = !this.isMoved
    },
  },
}
</script>

<style lang="scss" scoped>
.common-style {
  width: var(--box-width);
  height: var(--box-height);
  margin-right: var(--mar-right);
  text-align: center;
  line-height: var(--box-height);
  box-sizing: border-box;
  border-radius: 20px;
}

.container {
  width: calc(var(--box-width) * 2);
  display: flex;
  align-items: center;
  position: relative;
  margin: 100px auto;
  background: url('https://www.euweb.cn/wp-content/uploads/2016/12/302636-106.jpg');
  background-size: cover; /* 使图片完整展示 */
  background-position: center; /* 确保图片居中 */
  background-attachment: scroll; /* 默认的滚动行为，图片随内容滚动 */
  border-radius: 20px;
}

.shade {
  position: absolute;
  top: 0;
  left: 0;
  background-color: skyblue;
  transition: transform 0.5s ease;
}

.shade.move {
  transform: translateX(calc(var(--box-height)));
}

.login,
.register,
.shade {
  @extend .common-style;
}
</style>
